<template>
	<view class="all">
		<view class="image">
			<image src="../../../static/OIP-C.jpg" mode="aspectFit"></image>
		</view>
		<view class="box">
			<u-field class="field" v-model="name" label="用户名" placeholder="请填写用户名"></u-field>
			<view class="br"></view>
			<u-field class="field" v-model="account" label="账号" placeholder="请填写账号"></u-field>
			<view class="br"></view>
			<u-field class="field" v-model="password" label="密码" placeholder="请填写密码"></u-field>
			<view class="br"></view>
			<u-field class="field" v-model="password1" label="确认密码" placeholder="请确认密码"></u-field>
			<view class="br"></view>
			<button class="btn" @click="inst">注册</button>
			<view style="background-color: beige; height: 103px;"></view>
		</view>
		
	</view>
</template>	

<script>
	export default {
		data() {
			return {
				name:"",account:"",password:"",password1:""
			}
		},
		methods: {
			inst(){
				if (this.name.length == "") {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					});
				}
				else if (this.account.length == "") {
					uni.showToast({
						title: '账号不能为空',
						icon: 'none'
					});
				}
				else if (this.password.length == "" || this.password1.length == "") {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					});
				}
				else {
					if(this.password !== this.password1){
						uni.showToast({
							title: '两次密码不相同',
							icon: 'error'
						});
					}else{
						uni.request({
							url:'/api/api/login_ac',
							success: (res) => {
								var arr = [];
								for(var i=0;i<res.data.length;i++){
									arr[i] = res.data[i].account
								}
								if(arr.includes(this.account)){
									uni.showToast({
										title: '账号已存在',
										icon:'error'
									});	
									this.account = ''
								} else {
									uni.request({
										url:'/api/api/enroll_en',
										method:"PUT",
										data:{name:this.name,account:this.account,password:this.password},
										success: (res) => {
										    uni.showToast({
										    	title: '完成注册',
										    	icon:'success'
										    });	
											setTimeout(() => {
												uni.reLaunch({
													url:'/pages/user/login/login'
												})
											},500)
										}
									})
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.all{
		height: 100%;
		background-color: beige;
		.image{
			margin-left: 25px;
		}
		.box{
			.br{
				height: 1px;
				background-color: #000000;
				margin: -5px 50px 0 45px;
			}
			.field{
				margin-top: 10px;
				margin-left: 30px;
				font-size: 110%;
			}
		}
		.btn{
			width: 70%;
			margin-top: 30px;
			background-color: #2b8383;
		}
	}

</style>
